<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看流程定义</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../../admin/css/reset.css"/>
    <!--LogicFlow core包css-->
    <link rel="stylesheet" href="../../../logicflow/core/dist/style/index.css"/>
    <!--LogicFlow extension包css-->
    <link rel="stylesheet" href="../../../logicflow/extension/lib/style/index.css"/>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .lf-control-see {
            background-image: url('');
        }

        .lf-control-import {
            background-image: url('');
        }

        .lf-control-clear {
            background-image: url('');
        }

        .lf-control-save {
            background-image: url('');
        }

        .lf-control-refresh {
            background-image: url("");
        }

        .lf-control-exit {
            background-image: url('');
        }


        .custom-minimap {
            background-image: url();
        }

        #lf-graph {
            margin: 20px 20px 0px 20px;
            width: 98%;
            height: 100%;
        }


        /*tab title*/
        .drawer-section-list ul li {
            display: inline-block;
            zoom: 1;
            vertical-align: top;
            margin-right: 20px;
            font-size: 16px;
            line-height: 34px;
            color: #373d40;
            cursor: pointer;
        }

        /*选中下划线*/
        .drawer-section-list ul .on {
            color: #488bff;
            border-bottom: 1px solid #488bff;
        }

        /*列表*/
        .drawer-section-info div {
            text-align: left;
            border-top: 1px solid #ececec;
        }

    </style>
</head>
<body>

<form class="layui-form" action="" lay-filter="create-data-form">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">Json</li>
                    <li>流程图</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <textarea placeholder="" class="layui-textarea" name="content" style="height: 245px;" readonly></textarea>
                    </div>
                    <div class="layui-tab-item">
                        <div id="lf-graph" style="height: 245px;width: 100%;margin: 0;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="bottom">
        <div class="button-container">
            <button type="button" class="pear-btn pear-btn-md" lay-on="close">
                关闭
            </button>
        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../lms/base64.js"></script>
<script src="../../../lms/common.js"></script>
<script src="../../../lms/permission.js"></script>
<script src="../../../lms/config.js"></script>

<script type="text/javascript" src="../../../logicflow/core/dist/logic-flow.js"></script>
<!--LogicFlow的插件引入-->
<script type="text/javascript" src="../../../logicflow/extension/lib/Menu.js"></script>
<script type="text/javascript" src="../../../logicflow/extension/lib/DndPanel.js"></script>
<script type="text/javascript" src="../../../logicflow/extension/lib/Control.js"></script>
<script type="text/javascript" src="../../../logicflow/extension/lib/MiniMap.js"></script>
<script type="text/javascript" src="../../../logicflow/extension/lib/Group.js"></script>
<!--LogicFlow定制模型引入-->
<script type="text/javascript" src="../../../logicflow/customized/start.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/task.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/fork.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/join.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/subProcess.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/wfSubProcess.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/end.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/custom.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/decision.js"></script>
<script type="text/javascript" src="../../../logicflow/customized/transition.js"></script>

<script>


    const PRIMARY_KEY = "id";
    const RESTFUL_API = lms_config.api_url + "/adminapi/wf/process";

    // 字段设置
    layui.use(["common", "popup", "form", "jquery", "util"], function () {
        let common = layui.common;
        let popup = layui.popup;
        let form = layui.form;
        let util = layui.util;
        let method = 'POST';
        let $ = layui.jquery;
        let graphData = {};

        if (getQueryString('operation') == 'edit') {
            method = 'PUT'
            get()
            form.render()
        }

        function get() {
            layui.$.ajax({
                    url: RESTFUL_API + '/' + getQueryString(PRIMARY_KEY),
                    method: 'GET',
                    dataType: 'JSON',
                    async: false,
                    success: function (ret) {
                        if (ret.status === 200) {
                            let data = ret.data;
                            graphData = data['content'] ?? [];
                            form.val("create-data-form", {
                                'content': JSON.stringify(data.content, null, '\t')
                            })
                            form.render();
                        }
                    },
                    error: function (ret) {
                        alert("出错" + ret.status + "：" + ret.responseText);
                    }
                }
            );
        }

        const SilentConfig = {
            stopZoomGraph: false,
            stopScrollGraph: false,
            stopMoveGraph: false,
            adjustEdge: false,
            adjustEdgeStartAndEnd: false,
            adjustNodePosition: false,
            hideAnchors: true,
            nodeSelectedOutline: true,
            nodeTextEdit: false,
            edgeTextEdit: false,
            nodeTextDraggable: false,
            edgeTextDraggable: false,
        };

        //流程图显示
        /**
         * 创建LF实例
         * @type {LogicFlow}
         */
        const lf = new LogicFlow({
            container: document.querySelector("#lf-graph"),
            grid: {
                size: 20,
                visible: true,
                type: 'dot',
                config: {
                    color: '#ababab',
                    thickness: 1,
                },
            },
            plugins: [Menu, DndPanel, Control, MiniMap, Group],
            ...SilentConfig
        });

        /**
         *  小地图
         */
        lf.extension.control.addItem({
            iconClass: "custom-minimap",
            title: "",
            text: "导航",
            onClick: (lf, ev) => {
                const position = lf.getPointByClient(ev.x, ev.y);
                lf.extension.miniMap.show(
                    position.domOverlayPosition.x - 125,
                    position.domOverlayPosition.y + 40
                );
            }
        });
        /**
         * 图形注册
         */
        lf.register(Task);
        lf.register(Fork);
        lf.register(Start);
        lf.register(Decision);
        lf.register(End);
        lf.register(Join);
        lf.register(Custom);
        lf.register(SubProcess);
        lf.register(WfSubProcess);
        lf.register(Transition);
        lf.render(graphData)

        /**
         * 关闭当前页面
         */
        util.on('lay-on', {
            close: function () {
                parent.refreshTable();
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            }
        });
    });
</script>

</body>
</html>
